<template>
  <div class="container">
    <el-card class="box-card">
      <el-form>
        <div style="float:left;width:300px">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" style="width:200px;" @clear="getrandoms"></el-input>
          </el-form-item>
        </div>
        <el-form-item style="float:right">
          <el-button size="mini" @click="form.keyword=''">清除</el-button>
          <el-button size="mini" type="primary" @click="getrandoms">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示栏 -->
      <el-alert type="info" show-icon>
        <span slot="title">数据一共{{total}}条</span>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="230"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.questionType=='1'">单选</span>
              <span v-else-if="scope.row.questionType=='2'">多选</span>
              <span v-else>简答</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题型编号" width="250">
          <template slot-scope="scope">
            <div>
              <p
                v-for="(item,index) in scope.row.questionIDs"
                :key="index"
                @click="subjectView(item.id)"
                style="margin:0;color:#0099ff; cursor: pointer;"
              >{{item.number}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="170">
          <template slot-scope="scope">
            <div>{{scope.row.addDate | format}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="150"></el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="150"></el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.difficulty=='1'">简单</span>
              <span v-else-if="scope.row.difficulty=='2'">一般</span>
              <span v-else>困难</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="录入人"></el-table-column>
        <el-table-column prop label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="form.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 试题预览弹框 -->
      <el-dialog :visible.sync="dialogVisible" width="50%" title="题目预览" :before-close="handleClose">
        <question-preview
          :dialogVisible="dialogVisible"
          :viewID="viewID"
          @visible="dialogVisible=false"
          v-if="dialogVisible"
        ></question-preview>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from "@/api/hmmm/questions.js";
import questionPreview from "../components/questions-preview";
export default {
  data() {
    return {
      form: {
        keyword: "",
        pagesize: 10,
        page: 1,
      },
      tableData: [],
      total: null,
      dialogVisible: false,
      viewID: "", // 预览试题的id
    };
  },
  created() {
    this.getrandoms();
  },
  methods: {
    // 获取组题列表数据
    async getrandoms() {
      const { data } = await randoms(this.form);
      console.log(data, 5);
      this.tableData = data.items;
      this.total = data.counts;
      this.form.pagesize = +data.pagesize;
      this.form.page = +data.page;
    },
    // 删除组题列表数据
    async handleDelete(row) {
      const res = await this.$confirm(
        "此操作将永久删除该题目, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      if (res == "confirm") {
        const { data } = await removeRandoms({ id: row.id });
        console.log(data, "00000000");
        this.getrandoms();
        this.$message({
          message: "删除成功",
          type: "success",
        });
      }
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.form.pagesize = val;
      this.getrandoms();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.form.page = val;
      this.getrandoms();
    },
    // 试题预览
    subjectView(id) {
      // console.log(id, "123456");
      this.dialogVisible = true;
      this.viewID = id;
    },
    // 关闭试题预览弹框
    handleClose(done) {
      this.dialogVisible = false;
    },
  },
  components: {
    questionPreview,
  },
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 100%;
  position: relative;
  padding-bottom: 30px;
  .block {
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
}
.el-dialog__header {
  height: 55px;
}
</style>
